﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>平板电脑显示效果演示-科蚁网模板演示</title>
<link href="css/tablet.css" rel="stylesheet" type="text/css">
<link href="css/Float.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	    $(function(){
        // 页面浮动面板
        $("#floatPanel > .ctrolPanel > a.arrow").eq(0).click(function(){$("html,body").animate({scrollTop :0}, 800);return false;});
        $("#floatPanel > .ctrolPanel > a.arrow").eq(1).click(function(){$("html,body").animate({scrollTop : $(document).height()}, 800);return false;});
        var objPopPanel = $("#floatPanel > .popPanel");	
        var w = objPopPanel.outerWidth();
        $("#floatPanel > .ctrolPanel > a.qrcode").bind({
            mouseover : function(){
                        objPopPanel.css("width","0px").show();
                        objPopPanel.animate({"width" : w + "px"},300);return false;
                },
                mouseout : function(){
                        objPopPanel.animate({"width" : "0px"},300);return false;
                        objPopPanel.css("width",w + "px");
            }	
        });
    });
</script>
</head>

<body>

<div style="width:850px;" class="center-wrapper">
	<a href="index.html"><img class="go-mobile" src="images/go-mobile.png" alt="img"></a>
	<iframe class="iframe" width="798" height="801" frameborder="0" src="demo/index.html"></iframe>
	<div class="ipad-body"></div>
    <div style="margin-left:825px; top:2px;" class="ipad-body-end"></div>
</div>
 <!--浮动面板-->       
<div id="floatPanel">
	<div class="ctrolPanel">
		<a class="arrow" href="#"><span>顶部</span></a><a class="contact" href="http://www.ke01.com" target="_blank"><span>返回</span></a><a class="qrcode" href="#"><span>扫描二维码</span></a><a class="arrow" href="#"><span>底部</span></a></div>
	<div class="popPanel">
		<div class="popPanel-inner">
			<div class="qrcodePanel">
				<img src="http://qr.liantu.com/api.php?bg=f3f3f3&fg=ff0000&gc=222222&el=l&w=200&m=10&text=demo.ke01.com/201501/07/demo"/><span>手机扫描二维码查看实际效果</span></div>
			<div class="arrowPanel">
				<div class="arrow01">
				</div>
				<div class="arrow02">
				</div>
			</div>
		</div>
	</div>
</div>
<!--浮动面板结束-->
</body>
</html>